"use client";
import {
    claimActivityReward,
    ContinuousCfgItem,
    ContinuousListItem,
    ContinuousResult,
    ContinuousRewardItem,
    getContinuousRechargeInfo,
} from "@/api/activity";
import CutDown from "@/components/CutDown";
import GlobalNotify from "@/components/ModalPopup/GlobalNotifyModal";
import { ClaimActiveErrorMap } from "@/enums";
import { useRouter } from "@/i18n/routing";
import { formatAmount } from "@/utils/index";
import { Toast } from "antd-mobile";
import BigNumber from "bignumber.js";
import clsx from "clsx";
import { useTranslations } from "next-intl";
import { useSearchParams } from "next/navigation";
import React from "react";
import styles from "./page.module.scss";

interface ListItem {
    dayId: number;
    data: ContinuousListItem;
}

interface RewardItem {
    dayId: number;
    data: ContinuousRewardItem[];
}
//"#297fcf"
const DayItem = ({
    data,
    idx,
    onClaim,
    onEnd,
}: {
    data: ContinuousCfgItem;
    idx: number;
    onClaim: (data: ContinuousCfgItem) => void;
    onEnd?: Function;
}) => {
    const dayColor = React.useMemo(() => {
        return ["#12940f", "#297fcf", "#ec3920"][idx % 3];
    }, [idx]);

    const doClaim = () => {
        if (onClaim && typeof onClaim === "function") {
            onClaim(data);
        }
    };

    return (
        <div className={styles.dayItemBox}>
            {data.id >= 2 && data.isCanClaim && (
                <div className="mb-[.1rem] flex flex-row justify-center">
                    <div className={styles.canGet}>Grande Prêmio Disponível</div>
                </div>
            )}

            {!!data.end_at && (
                <div className="item-center mb-[.1rem] flex flex-row justify-center">
                    <CutDown
                        endTime={data.end_at - Date.now() / 1000}
                        itemBgColor="rgba(255,255,255,.4)"
                        onEnd={onEnd}
                    ></CutDown>
                </div>
            )}
            <div className={styles.premioItem}>
                <div className={styles.premioItemDay}>
                    <span style={{ color: dayColor }}>{data.days}</span>
                </div>
                <div className="flex flex-1 flex-col justify-between">
                    <div className="text-[.16rem] font-bold">
                        Recarga contínua por {data.days} dias
                    </div>
                    <div className="flrx-row flex items-center justify-between">
                        <div>Recompensa de login</div>
                        <div
                            className={clsx(styles.premioItemBtn, {
                                [styles.disabled]: !data.isCanClaim,
                            })}
                            onClick={doClaim}
                        >
                            {data.is_sign === 0 ? "Recebido" : "Receber"}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

const Page = () => {
    const t = useTranslations();
    const query = Object.fromEntries(useSearchParams());
    const [data, setData] = React.useState<ContinuousResult>({} as ContinuousResult);
    const router = useRouter();
    const dayContainer = React.useRef<HTMLDivElement>(null);

    const [amount, setAmount] = React.useState<any>({});
    const [visible, setVisible] = React.useState<boolean>(false);

    const act = React.useMemo(() => {
        if (!data || data.type === 11) return 0;
        return 1;
    }, [data]);

    React.useEffect(() => {
        getData();
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [query.activity_id]);
    const getData = async () => {
        const res = await getContinuousRechargeInfo({ activity_id: Number(query.activity_id) });
        if (res.code === 200) {
            setData(res.data);
        }
    };

    const list = React.useMemo<ListItem[]>(() => {
        if (!data?.list?.list) {
            return [];
        }
        const result: ListItem[] = [] as ListItem[];
        Object.keys(data?.list?.list).forEach((key: string) => {
            const item = data?.list?.list[key as any];
            const key1 = Object.keys(item)[0];
            result.push({ dayId: Number(key), data: item[key1 as any] });
        });
        return result.sort((a, b) => a.dayId - b.dayId);
    }, [data?.list?.list]);

    const reward_list = React.useMemo<RewardItem[]>(() => {
        if (!data?.list?.reward_list) {
            return [];
        }
        const result: RewardItem[] = [] as RewardItem[];

        Object.keys(data?.list?.reward_list).forEach((key: string) => {
            const item = data?.list?.reward_list[key as any];
            const res2: ContinuousRewardItem[] = [];
            Object.keys(item).forEach((key2: string) => {
                const item2 = item[key2 as any];
                res2.push(item2);
            });
            result.push({ dayId: Number(key), data: res2 });
        });

        return result;
    }, [data?.list?.reward_list]);

    const waitList = React.useMemo<ContinuousCfgItem[]>(() => {
        if (!data?.list?.config_list) return [];
        const result = [] as ContinuousCfgItem[];
        data?.list?.config_list.forEach((item) => {
            if (
                item.is_sign === 0 ||
                item.is_suss === 1 ||
                !(item.start_at * 1000 < Date.now() && item.end_at * 1000 > Date.now())
            ) {
                item.isCanClaim = false;
            } else {
                item.isCanClaim = true;
            }
            result.push(item);
        });
        return result.sort((a, b) => a.days - b.days);
    }, [data?.list?.config_list]);

    const goDeposit = () => {
        router.push("/deposit");
    };

    const doClaim = async (data: ContinuousCfgItem) => {
        if (!query.activity_id) {
            Toast.show({ content: "Missing activity ID" });
            return;
        }
        if (!data.is_sign) return;
        try {
            const res = await claimActivityReward({
                activity_id: Number(query.activity_id),
                id: data.days,
            });

            if (res.code === 200 && res?.data?.code === 1) {
                const amountObj: any = {};
                if (res?.data?.reward) {
                    res?.data?.reward.forEach((item: any) => {
                        amountObj[`coin_${item.coin_type}`] = formatAmount(item.amount);
                    });
                }
                if (res?.data?.extra_reward) {
                    res?.data?.extra_reward.forEach((item: any) => {
                        amountObj[`coin_${item.coin_type}`] = formatAmount(
                            new BigNumber(amountObj[`coin_${item.coin_type}`] || 0)
                                .plus(item.amount)
                                .toString()
                        );
                    });
                }
                if (Object.keys(amountObj).length > 0) {
                    setVisible(true);
                    setAmount(amountObj);
                }
                getData();
            } else {
                throw new Error(ClaimActiveErrorMap.get(res.data.code) || t(`code.400`));
            }
        } catch (error: any) {
            if (error) {
                Toast.show({
                    content: error.message || error.toString(),
                    maskClickable: false,
                });
            }
        }
    };

    const doGoLinkActivity = (type: 11 | 13) => {
        if (type === data.type || !data.associated_activity_id) return;
        router.replace({
            pathname: "/rechargeproxy",
            query: { activity_id: data.associated_activity_id },
        });
    };

    return (
        <div className={clsx(styles.continuePage)}>
            <div className={styles.container}>
                <div className={styles.top}>
                    <img className={styles.img} src="/proxyRecharge/top.png" alt="" />
                    {act === 0 && (
                        <div className={styles.recharge} onClick={goDeposit}>
                            RECARGA
                        </div>
                    )}
                </div>
                <div className={styles.content}>
                    <div className={styles.tip}>
                        <div
                            className={clsx(styles.text, {
                                [styles.active]: act === 0,
                            })}
                            onClick={() => doGoLinkActivity(11)}
                        >
                            Meu login
                        </div>
                        <div
                            className={clsx(styles.text, {
                                [styles.active]: act === 1,
                            })}
                            onClick={() => doGoLinkActivity(13)}
                        >
                            Login de amigo
                        </div>
                    </div>
                    <div className={styles.inner}>
                        <div
                            className={clsx(styles.innerContainer, {
                                [styles.innerContainer1]: act === 1,
                            })}
                        >
                            {!!list?.length && (
                                <div
                                    className={clsx(styles.stageBox, {
                                        [styles.stageBox1]: act === 1,
                                    })}
                                >
                                    {list.map((item, idx) => {
                                        return (
                                            <div
                                                key={item.dayId}
                                                className={clsx(styles.stageItem, {
                                                    [styles.unlock]: item.data.is_sign === 1,
                                                    [styles.lock]: item.data.is_sign === 0,
                                                })}
                                            >
                                                <div className={styles.stageText}>
                                                    <div>Para ser</div>
                                                    <div className="mt-[.03rem]">concluído</div>
                                                </div>
                                                <div className={styles.stageText2}>
                                                    <span>recarga</span>
                                                    <div className={styles.stageText2Num}>
                                                        {item.data.pay_num}
                                                    </div>
                                                </div>
                                                <div className={clsx(styles.stageImg)}></div>
                                                <div className={styles.stageDay}>
                                                    Dia {item.dayId}
                                                </div>
                                            </div>
                                        );
                                    })}
                                </div>
                            )}
                            {/* {!!list?.length && (
                                <div className={styles.daybox}>
                                    <div className={styles.dayContainer} ref={dayContainer}>
                                        {list.map((item: any) => {
                                            return (
                                                <div
                                                    key={item.dayId}
                                                    className={clsx(styles.dayItem, {
                                                        [styles.active]: item.data.is_sign,
                                                    })}
                                                >
                                                    <div className={styles.dayItemText}>
                                                        {item.dayId} dia
                                                    </div>
                                                    <div className={styles.dayitemTextActive}>
                                                        <img
                                                            src={`/continuous/s${item.data.id}.png`}
                                                            alt=""
                                                        />
                                                        <div className="flex flex-row items-end text-[#dbc6ff]">
                                                            <span className="relative top-[1px] mt-[2px] text-[.13rem]">
                                                                {item.dayId}
                                                            </span>
                                                            <span>dia</span>
                                                        </div>
                                                        <div>recarga</div>
                                                        <div className="mt-[.03rem] w-[100%] overflow-hidden text-ellipsis text-[#ffb400]">
                                                            {item?.data?.pay_num}
                                                        </div>
                                                    </div>
                                                </div>
                                            );
                                        })}
                                    </div>
                                </div>
                            )} */}
                            {!!waitList.length && (
                                <div className={styles.premio}>
                                    <div
                                        className={clsx(styles.premioTitle, {
                                            [styles.premioTitle1]: act === 1,
                                        })}
                                    >
                                        {act === 1 && (
                                            <div className={styles.premioTitleText}>
                                                <div>AMIGO ENTRAR PARA</div>
                                                <div>RECEBER CORTESIA</div>
                                            </div>
                                        )}
                                        {act === 0 && (
                                            <div className={styles.premioTitleText}>
                                                <div>ENTRAR E RECEBER CORTESIA</div>
                                            </div>
                                        )}
                                    </div>
                                    <div className={styles.premioContainer}>
                                        <div className={styles.premioContent}>
                                            {waitList.map((item, idx: number) => {
                                                return (
                                                    <DayItem
                                                        key={item.days}
                                                        data={item}
                                                        idx={idx}
                                                        onClaim={doClaim}
                                                        onEnd={getData}
                                                    ></DayItem>
                                                );
                                            })}
                                        </div>
                                    </div>
                                </div>
                            )}
                            <div className={styles.cfgbox}>
                                <div className={styles.cfgContainer} ref={dayContainer}>
                                    <div className={styles.cfgHeader}>
                                        <div>
                                            Dias de
                                            <br />
                                            depósito
                                        </div>
                                        <div>
                                            Requisitos da <br />
                                            atividade
                                        </div>
                                        {data.type === 11 && (
                                            <div>
                                                Valor do
                                                <br />
                                                bônus
                                            </div>
                                        )}
                                        {data.type === 13 && (
                                            <div>
                                                Recompensas <br />
                                                de Agente
                                            </div>
                                        )}
                                    </div>
                                    {reward_list.map((item) => {
                                        return (
                                            <div key={item.dayId} className={styles.cfgItem}>
                                                <div className={styles.cfgItemName}>
                                                    Recarga contínua por{" "}
                                                    <div className="text-[#faab00]">
                                                        {item.dayId}dias
                                                    </div>
                                                </div>
                                                <div className="flex-1">
                                                    {item.data.map((item2, idx) => {
                                                        return (
                                                            <div
                                                                key={item2.id}
                                                                className={styles.cfgItemChild}
                                                            >
                                                                <div>
                                                                    Mais de {item2.target_num} por
                                                                    dia
                                                                </div>
                                                                <div>{item2.target_reward}</div>
                                                            </div>
                                                        );
                                                    })}
                                                </div>
                                            </div>
                                        );
                                    })}
                                </div>
                            </div>

                            <div className={styles.introbox}>
                                <div className={styles.introContainer}>
                                    <div className={styles.introTitle}>
                                        <span className={styles.introTitleText}>
                                            Regras de Atividade
                                        </span>
                                    </div>
                                    <div className="h-[.2rem]"></div>
                                    <ul className={styles.introboxDesc}>
                                        <li>
                                            Os prémios são reclamados no mesmo dia das 23:00 às
                                            23:50
                                        </li>
                                        <li>
                                            O bônus desta promoção deve ser solicitado dentro do
                                            período promocional. Solicitações feitas após o prazo
                                            serão consideradas como desistência automática.
                                        </li>
                                        <li>
                                            Ao participar desta promoção, você concorda em cumprir
                                            os Termos e Regras da Promoção.
                                        </li>
                                    </ul>

                                    <div className="mt-[.1rem]">
                                        <div className="pb-[.1rem] text-center text-[.14rem] font-bold">
                                            Termos e Condições
                                        </div>
                                    </div>
                                    <ul className={styles.introboxDesc}>
                                        <li>
                                            Todas as ofertas são liquidadas em reais (BRL - R$) e
                                            seguem o horário oficial de Brasília.
                                        </li>
                                        <li>
                                            Cada jogador, domicílio, endereço, e-mail, número de
                                            telefone, método de pagamento (mesmo cartão de
                                            débito/crédito ou conta bancária) e endereço IP são
                                            utilizados para verificação.
                                        </li>
                                        <li>
                                            Caso seja identificado que qualquer grupo ou indivíduo
                                            esteja abusando dos benefícios oferecidos pela empresa,
                                            esta reserva-se o direito de suspender ou cancelar o
                                            saldo do grupo envolvido.
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <GlobalNotify
                amount={amount}
                visible={visible}
                onChange={() => setVisible(false)}
                deraction={5000}
            ></GlobalNotify>
        </div>
    );
};

export default Page;